import { usePromptEditor } from "@renderer/hooks/use-prompt-editor";
import { cn } from "@renderer/lib/utils";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { PromptEditor } from "./prompt-editor";

interface UserPromptTemplateTextareaProps {
  value: string | null;
  onChange: (value: string | null) => void;
}

export function UserPromptTemplateTextarea({
  value,
  onChange,
}: UserPromptTemplateTextareaProps) {
  const { t } = useTranslation("translation", {
    keyPrefix: "chat.tool-bar.parameters.user_prompt",
  });

  const { valid, handleStateChange } = usePromptEditor(value, {
    needValidate: true,
  });

  const handleValueChange = useCallback(
    (value: string) => {
      handleStateChange(value, onChange);
    },
    [handleStateChange, onChange],
  );

  return (
    <div className="flex flex-col gap-y-2">
      <PromptEditor
        wrapperClassName={cn(
          "max-h-[145px] min-h-[145px] overflow-y-auto",
          !valid &&
            "border-danger/70 focus-within:border-danger/70 focus-within:ring-3 focus-within:ring-danger/20 hover:border-danger/70 focus-within:hover:border-danger/70",
        )}
        label={t("label")}
        tips={t("tips")}
        isSystemPrompt={false}
        canReset
        value={value}
        onChange={(value) => handleValueChange(value)}
      />
      {!valid && (
        <span className="self-end text-danger text-sm">
          {t("error_message")}
        </span>
      )}
    </div>
  );
}
